<template>
  <div class="app-container home">
    <div class="bg_fff p_10 listbody">
      <!-- <el-button size="small" @click="addTab(editableTabsValue)">
        add tab
      </el-button> -->
      <!-- <el-tabs
        v-model="activeName"
        class="comm_tab"
        @tab-click="handleClick"
      >
        <el-tab-pane label="全部" name="first">
          <active-list v-if="activeName=='first'" :type='99'/>
        </el-tab-pane>
        <el-tab-pane label="奖品" name="second">
          <active-list v-if="activeName=='second'" :type='9' />
        </el-tab-pane>
        <el-tab-pane label="现金" name="third">
          <active-list v-if="activeName=='third'" :type='0' />
        </el-tab-pane>
        <el-tab-pane label="奖品/现金" name="fourth">
          <active-list v-if="activeName=='fourth'" :type='1' />
        </el-tab-pane>
      </el-tabs> -->
      <el-tabs v-model="activeName" class="comm_tab">
        <el-tab-pane label="全部" name="first">
          <active-list v-if="activeName=='first'" :type='0'/>
        </el-tab-pane>
        <el-tab-pane
          v-for="(item) in editableTabs"
          :key="item.id"
          :label="item.name"
          :name="item.id+''"
        >
          <active-list v-if="activeName==item.id" :type='item.id' />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getModuleList } from '@/api/sethome'
import ActiveList from "./ActiveList.vue";
export default {
  name:'adminactionaclist',
  data() {
    return {
      activeName: "first",
      // editableTabs: [
      //   {
      //     title: 'Tab 1',
      //     name: '1',
      //   }, {
      //     title: 'Tab 2',
      //     name: '2',
      //   }
      // ],
      editableTabs:[],
      tabIndex:0
    };
  },
  components: {
    ActiveList,
  },
  created(){
    this.getModuleList()
  },
  methods:{

    getModuleList(){
      getModuleList().then(res=>{
        this.editableTabs = res.data
      })
    },

    addTab(targetName) {
      let newTabName = ++this.tabIndex + '';
      this.editableTabs.push({
        title: 'New Tab',
        name: newTabName,
      });
      this.activeName = newTabName;
    },

    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.activeName;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.activeName = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },

    handleClick(){}
  }
};
</script>

<style lang="scss" scoped>
.listbody {
  width: 100%;
  min-height: calc(100vh - 135px);
  border-radius: 6px;
}
</style>